import Vue from 'vue'
import VueRouter from 'vue-router'
import Parent from './transition.vue'
Vue.use(VueRouter)

const Home = {
    template: `
    <div>
    <h2>Home</h2>
    <p>this is Home</p>
    </div>
    `
}

const Page404 = {
    template: `
    <div>
        <h2>error:404</h2>
    </div>
    `,
    beforeRouteEnter: (to, from, next) => {
        console.log(to)
        next()
    },
    beforeRouteLeave: (to, from, next) => {
        console.log(to)
        next()
    }
}


const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        {path: '/', component: Home},
        {
            path: '/Parent',
            component: Parent,
            beforeEnter: (to, from, next) => {
                console.log(to)
                //next()//可以 next(false)不可以
                next({path: '/fsdfsdf'})
            }
        },
        {path: '*', component: Page404},
    ]
})

new Vue({
    router,
    data(){
        return {
            aaa: 'fade1'
        }
    },
    template: `
    <div id="app">
        <h1>this is transition</h1>
        <ul>
            <li><router-link to="/">/</router-link></li>
            <li><router-link to="/Parent">/Parent</router-link></li>
            <li><router-link to="/error">/error</router-link></li>
        </ul>
        <transition :name="aaa" mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
    `
}).$mount('#app')

